import React, { Component } from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
import AntDesign from 'react-native-vector-icons/AntDesign'

import Home from '../pages/Home/Home'
import User from '../pages/User'
import More from '../pages/More'

const Tab = createBottomTabNavigator();

export default function Tabs() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor:'#d5af00',
        inactiveTintColor:'#333'
      }}
    >
      <Tab.Screen 
        name="tab-home" 
        component={ Home } 
        options={{
          title:'首页',
          tabBarIcon : ({ color,size }) => (
            <SimpleLineIcons name='home' color={color} size={size} />
          )
        }}
      />
      <Tab.Screen 
        name="tab-more" 
        component={ More } 
        options={{
          title:'更多',
          tabBarIcon : ({ color,size }) => (
            <AntDesign name='appstore-o' color={color} size={size} />
          )
        }}
      />
      <Tab.Screen 
        name="tab-user" 
        component={ User } 
        options={{
          title:'我的',
          tabBarIcon : ({ color,size }) => (
            <SimpleLineIcons name='user' color={color} size={size} />
          )
        }}
      />
    </Tab.Navigator>
  );
}